<template>
  <div>
    <el-dialog
      title="产品信息汇总"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="产品信息" name="first">
          <div class="listItem">
            <div class="list">
              <div class="item">
                <label>产品序号：</label
                ><span>{{ dataForm.product.code }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>产品类型：</label
                ><span>{{ dataForm.product.type }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>型号：</label><span>{{ dataForm.product.model }}</span>
              </div>
            </div>
            <!-- <div class="list">
                            <div class="item"><label>合同编号：</label><span>{{ dataForm.product.contractNumber }}</span>
                            </div>
                        </div> -->
            <div class="list">
              <div class="item">
                <label>额定容量：</label
                ><span>{{ dataForm.product.ratedCapacity }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>额定电压比：</label
                ><span>{{ dataForm.product.ratedVoltageRatio }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>额定频率：</label
                ><span>{{ dataForm.product.ratedFrequency }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>联结组标号：</label
                ><span>{{ dataForm.product.joinGroupLabel }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>冷却方式：</label
                ><span>{{ dataForm.product.typeOfCooling }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>激活状态：</label
                ><span>{{ dataForm.product.activateStateName }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>送货司机：</label
                ><span>{{ dataForm.product.driverNames }}</span>
              </div>
            </div>
            <!-- <div class="list itemfile">
                            <div class="item"><label>产品图纸：</label></div>
                            <div class="imgList">
                                <div v-for="item in fileList1" class="imgItem">
                                    <img class="imgitem-thumbnail" :src="item.url" alt="">
                                    <span class="imgitem-actions">
                                        <span class="imgitem-preview" @click="handlePictureCardPreview(item)">
                                            <i class="el-icon-zoom-in"></i>
                                        </span>
                                        <span class="imgitem-delete" @click="handleDownloadImg(item)">
                                            <i class="el-icon-download"></i>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div> -->
            <div class="list">
              <div class="items">
                <label>产品图纸:</label>
                <el-upload
                  class="upload-demo"
                  action="#"
                  :on-preview="handlePreview"
                  :file-list="fileList1"
                  disabled
                ></el-upload>
              </div>
            </div>
            <div class="list">
              <div class="items">
                <label>试验报告：</label>
                <el-upload
                  class="upload-demo"
                  action="#"
                  :on-preview="handlePreview"
                  :file-list="fileList"
                  disabled
                ></el-upload>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="项目信息" name="second">
          <div class="listItem listone" v-if="dataForm.project">
            <div class="list">
              <div class="item">
                <label>名称：</label
                ><span>{{ dataForm.product.projectName }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>承运单位：</label
                ><span>{{ dataForm.project.carrier }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>收货单位：</label
                ><span>{{ dataForm.project.consignee }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>收货方地址：</label
                ><span>{{ dataForm.project.consigneeAddress }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>收货方联系人及电话：</label
                ><span>{{ dataForm.project.consigneePhone }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>托运单位：</label
                ><span>{{ dataForm.project.shipper }}</span>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <label>托运方联系电话：</label
                ><span>{{ dataForm.project.shipperPhone }}</span>
              </div>
            </div>
          </div>
          <div v-if="!dataForm.project" style="text-align: center; color: #999">
            该产品未关联项目
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户反馈" name="third">
          <div class="block" v-if="dataForm.feedbacks">
            <el-timeline>
              <el-timeline-item
                :timestamp="item.handleTime"
                placement="top"
                v-for="item in dataForm.feedbacks"
              >
                <el-card>
                  <div class="listItem listThree">
                    <!-- <div style="display: flex;justify-content: space-between;"> -->
                    <div class="list">
                      <div class="item">
                        <label>用户名称：</label
                        ><span>{{ item.userCompany }}</span>
                      </div>
                    </div>
                    <div class="list">
                      <div class="item">
                        <label>姓名：</label><span>{{ item.userName }}</span>
                      </div>
                    </div>
                    <div class="list">
                      <div class="item">
                        <label>电话：</label><span>{{ item.userPhone }}</span>
                      </div>
                    </div>
                    <!-- </div> -->
                    <div class="list">
                      <div class="item">
                        <label>地址：</label><span>{{ item.userAddress }}</span>
                      </div>
                    </div>
                    <div class="list">
                      <div class="items">
                        <label>现场问题描述：</label>
                        <div class="texareastyle">{{ item.problemDesc }}</div>
                      </div>
                    </div>
                    <div class="list">
                      <div class="item">
                        <label>处理状态：</label
                        ><span>{{ item.handleStateName }}</span>
                      </div>
                    </div>
                    <div class="list" v-if="item.handleState">
                      <div class="item">
                        <label>处理人：</label
                        ><span>{{ item.handUserName }}</span>
                      </div>
                    </div>
                    <div class="list" v-if="item.handleState == 1">
                      <div class="item">
                        <label>故障类型：</label
                        ><span>{{ item.faultTypeNames }}</span>
                      </div>
                    </div>
                    <div class="list itemfile" v-if="item.handleState == 1">
                      <div class="item"><label>图片：</label></div>
                      <div class="imgList">
                        <div v-for="item in item.fileList" class="imgItem">
                          <img
                            class="imgitem-thumbnail"
                            :src="item.url"
                            alt=""
                          />
                          <span class="imgitem-actions">
                            <span
                              class="imgitem-preview"
                              @click="handlePictureCardPreview(item)"
                            >
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <!-- <span
                              class="imgitem-delete"
                              @click="handleDownloadImg(item)"
                            >
                              <i class="el-icon-download"></i>
                            </span> -->
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="list" v-if="item.handleState">
                      <div class="items">
                        <label>处理描述：</label>
                        <div class="texareastyle">{{ item.handleDesc }}</div>
                      </div>
                    </div>
                    <div class="list">
                      <div class="item">
                        <label>评价：</label
                        ><span>{{ item.evaluateName }}</span>
                      </div>
                    </div>
                    <div class="list" v-if="item.evaluate">
                      <div class="items">
                        <label>您认为本公司的服务需要改进的地方：</label>
                        <div class="texareastyle">{{ item.suggestion }}</div>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
          <div
            v-if="!dataForm.feedbacks"
            style="text-align: center; color: #999"
          >
            暂无用户反馈
          </div>
        </el-tab-pane>
        <el-tab-pane label="现场运维" name="fourth">
          <!-- <el-button
            type="primary"
            plain
            @click="look(dataForm.installRespVO.id, dataForm.product.id)"
            >现场运维</el-button
          > -->
        </el-tab-pane>
        <!-- <el-tab-pane label="现场运维" name="fourth">
                    <div class="block" v-if="dataForm.maintenances">
                        <el-timeline>
                            <el-timeline-item :timestamp="item.serviceTime" placement="top"
                                v-for="item in dataForm.maintenances">
                                <el-card>
                                    <div class="listItem listThree">
                                        <div class="list">
                                            <div class="item"><label>用户单位：</label><span>{{ item.userCompany }}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item"><label>服务地点：</label><span>{{ item.serviceLocation
                                                    }}</span></div>
                                        </div>
                                        <div class="list">
                                            <div class="item"><label>联系人：</label><span>{{ item.contactPerson }}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item"><label>电话：</label><span>{{ item.phone }}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item"><label>合同号：</label><span>{{ item.contractNumber }}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item"><label>产品型号：</label><span>{{ item.productModel }}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item"><label>产品序号：</label><span>{{ item.exitNumber }}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item"><label>服务时间：</label><span>{{ item.serviceTime }}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="item"><label>服务人签字：</label><span>{{ item.serviceUser }}</span>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="items"><label>服务内容：</label>
                                                <div class="texareastyle">{{ item.serviceContent
                                                    }}</div>
                                            </div>
                                        </div>
                                        <div class="list">
                                            <div class="items"><label>服务结果：</label>
                                                <div class="texareastyle">{{ item.serviceResult
                                                    }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                    <div v-if="!dataForm.maintenances" style="text-align: center;color: #999;">暂无现场运维</div>
                </el-tab-pane> -->
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="dialogFormVisible = false"
            >关 闭</el-button
          >
          <!-- <el-button size="small" type="primary" @click="dataFormSubmit()" :disabled="isDisabled">确 定</el-button> -->
        </span>
      </template>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisibleImg"
      width="50%"
      style="height: 100%"
    >
      <div style="height: 60%">
        <img style="max-width: 100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>

    <look v-if="lookVisible" ref="look"></look>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import { getToken } from "@/utils/auth";
import { treeDataTranslate } from "../../utils/treeDataTranslate.js";
import look from "../maintenance/look.vue";
export default {
  emits: ["refreshDataList"],
  components: {
    look,
  },
  data() {
    return {
      dialogFormVisible: false,
      isDisabled: false,
      dataForm: {
        project: {
          carrier: "",
          consignee: "",
          consigneeAddress: "",
          consigneePhone: "",
          shipperPhone: "",
        },
        product: {
          projectName: "",
          code: "",
          type: "",
          model: "",
          frequency: "",
          ratedVoltage: "",
          ratedCurrent: "",
          standard: "",
          activateStateName: "",
          driverName: "",
        },
        feedbacks: [],
      },
      projectList: [],
      driverList: [],
      fileList: [],
      fileList1: [],
      dialogVisibleImg: false,
      dialogImageUrl: "",
      activeName: "first",
      url: process.env.VUE_APP_BASE_API,
      headers: {
        token: getToken(), //从cookie里获取token，并赋值  Authorization ，而不是token
      },
      dataRule: {
        // driverName: [
        //   { required: true, message: '司机姓名必填' },
        // ],
        // driverPhone: [
        //   { required: true, message: '司机联系电话必填' },
        // ],
        // licenseNumber: [
        //   { required: true, message: '车牌号必须填写' },
        // ]
      },
      formLabelWidth: "140px",
      fileList2: [],
      faultTypeList: [],
      lookVisible: false,
    };
  },
  created() {},
  methods: {
    async init(data) {
      this.fileList = [];
      this.fileList1 = [];
      this.activeName = "first";
      this.dataForm = data;
      this.dialogFormVisible = true;
      await this.Sevice({
        url: "/syn/Feedback/faultSelect",
        method: "get",
      }).then((res) => {
        // console.log(res);
        if (res.code != 200) {
        } else {
          this.faultTypeList = treeDataTranslate(res.select, "id");
        }
      });
      //附件
      if (this.dataForm.product.appendixUrl) {
        let appendixUrl = this.dataForm.product.appendixUrl.split(",");
        let appendixName = this.dataForm.product.appendixName.split(",");
        let list = [];
        for (let i = 0; i < appendixUrl.length; i++) {
          list.push({ url: appendixUrl[i], name: appendixName[i] });
        }
        this.fileList = list;
      }
      //图纸
      if (this.dataForm.product.picUrl) {
        let picUrl = this.dataForm.product.picUrl.split(",");
        let picName = this.dataForm.product.picName.split(",");
        let list = [];
        for (let i = 0; i < picUrl.length; i++) {
          list.push({ url: picUrl[i], name: picName[i] });
          // list.push({
          //     url: this.url + picUrl[i],
          //     name: picName[i],
          //     response: {
          //         map: {
          //             filePath: picUrl[i],
          //             fileName: picName[i],
          //         }
          //     }
          // })
        }
        this.fileList1 = list;
      }

      for (let i = 0; i < this.dataForm.feedbacks.length; i++) {
        this.dataForm.feedbacks[i].faultTypeNames = this.getTreeIds(
          this.faultTypeList,
          this.dataForm.feedbacks[i].faultTypeIds
        );
        if (this.dataForm.feedbacks[i].appendixUrl) {
          let appendixUrl = this.dataForm.feedbacks[i].appendixUrl.split(",");
          let appendixName = this.dataForm.feedbacks[i].appendixName.split(",");
          let list = [];
          for (let i = 0; i < appendixUrl.length; i++) {
            list.push({
              url: this.url + appendixUrl[i],
              name: appendixName[i],
              response: {
                map: {
                  filePath: appendixUrl[i],
                  fileName: appendixName[i],
                },
              },
            });
          }
          this.dataForm.feedbacks[i].fileList = list;
        }
      }
    },
    getTreeIds(tree, nodeId, config) {
      const { children = "children", id = "id" } = config || {};
      const toFlatArray = (tree, parentId) => {
        return tree.reduce((t, _) => {
          const child = _[children];
          return [
            ...t,
            parentId ? { ..._, parentId } : _,
            ...(child && child.length ? toFlatArray(child, _[id]) : []),
          ];
        }, []);
      };
      const getIds = (flatArray) => {
        let ids = [nodeId];
        let names = [];
        let child = flatArray.find((_) => _[id] == nodeId);
        if (child && child.parentId) {
          console.log(child);
          names = [child.faultName];
        } else {
          if (child) {
            names = [child.faultName];
          }
        }

        while (child && child.parentId) {
          ids = [child.parentId, ...ids];
          child = flatArray.find((_) => _[id] == child.parentId);
          names = [child.faultName, ...names];
        }
        // return [ids,names]
        return names.join("/");
      };
      return getIds(toFlatArray(tree));
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleImg = true;
    },
    handleDownloadImg(file) {
      this.getImge(file);
      this.fileDown(file);
    },
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(tab.name);
      if (tab.name == "fourth") {
        this.lookVisible = true;
        this.$nextTick(() => {
          this.$refs.look.init(
            this.dataForm.installExportResponse.id,
            this.dataForm.product.id
          );
        });
      }
    },
    handlePreview(file) {
      this.fileDown(file);
    },
    look(id, productId) {
      this.lookVisible = true;
      this.$nextTick(() => {
        this.$refs.look.init(id, productId);
      });
    },
  },
};
</script>

<style scoped>
.mod-menu .menu-list__input > .el-input__inner,
.mod-menu .icon-list__input > .el-input__inner {
  cursor: pointer;
}

.mod-menu__icon-popover {
  width: 458px;
  overflow: hidden;
}

.mod-menu__icon-inner {
  width: 478px;
  max-height: 258px;
  overflow-x: hidden;
  overflow-y: auto;
}

.mod-menu__icon-list {
  width: 458px;
  padding: 0;
  margin: -8px 0 0 -8px;
}

.mod-menu__icon-list > .el-button {
  padding: 8px;
  margin: 8px 0 0 8px;
}

.mod-menu__icon-list > .el-button > span {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.mod-menu .icon-list__tips {
  font-size: 18px;
  text-align: center;
  color: #e6a23c;
  cursor: pointer;
}

.el-tree {
  height: 200px;
  overflow-y: auto;
}

/* 详情 */
.item {
  display: flex;
  padding: 5px 0;
}

.item label {
  margin-right: 10px;
  min-width: 90px;
}

.item span {
  width: calc(100% - 80px);
  /* padding: 5px 0; */
  line-height: 26px;

  /* border-bottom: 1px solid #ccc; */
}

.items div {
  padding-left: 10px;
  line-height: 26px;
}

.list label {
  /* padding: 5px 0; */
  line-height: 26px;
  color: #999;
}

.list {
  /* border-bottom: 1px solid #ccc; */
}

.listItem {
  /* box-shadow: 0px 0px 3px #ccc;
  padding: 10px; */
  font-family: dengxian;
}

.texareastyle {
  text-indent: 28px;
  padding: 5px 28px !important;
  border: 1px solid #ccc;
  min-height: 100px;
  border-radius: 10px;
}

.imgList {
  display: flex;
  flex-wrap: wrap;
}

.imgItem {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  margin: 0 8px 8px 0;
  position: relative;
}

.imgitem-thumbnail {
  width: 100%;
  /* height: 100%; */
}

.imgitem-actions {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imgitem-actions:hover {
  opacity: 1;
}

.imgitem-preview {
  cursor: pointer;
  margin-right: 15px;
}

.imgitem-delete {
  cursor: pointer;
}
</style>

<style>
.items .el-upload.el-upload--text {
  display: none;
}

.listone .item label {
  min-width: 145px;
}

.listone .item span {
  width: calc(100% - 145px);
}

.listThree .item label {
  min-width: 90px;
}

.listThree .item span {
  width: calc(100% - 90px);
}
</style>
